<template>
  <div class="myOrder">
    <nav-bar :left-arrow="true" :title='title'></nav-bar>
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="item in orderList" :key="item.index">
        <template #title>
          <div>{{item.type}}</div>
        </template>
        <template #value>
          <div>{{item.orderTime}}</div>
        </template>
        <div>
          <p>车牌号：{{item.licensePlate}}</p>
        </div>
        <div class="box">
          <van-button size="small" type="danger" @click="cancel(item.orderId)">取消预约</van-button>
          <van-button size="small" type="primary" @click="toDrive()">立即驾驶</van-button>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'

import { myOrder, cancelOrder } from '@/api/mine'
import { driving } from '@/api/car'
import { using } from '@/api/user'

export default {
  name: 'MyOrder',
  components: {
    NavBar
  },
  data () {
    return {
      title: '我的预定',
      orderList: [],
      activeNames: ['1'],
      carId: 0
    }
  },
  computed: {
    ...mapGetters([
      'isLogin',
      'userInfo'
    ])
  },
  created () {
    this.getOrderList()
  },
  methods: {
    async getOrderList () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await myOrder(params)
      this.orderList = res.data
      if (this.orderList.length !== 0) {
        this.carId = res.data[0].carId
      }
    },
    async cancel (orderId) {
      this.$dialog.confirm({
        message: '您确定要取消预订吗？'
      })
        .then(async () => {
          const params = {
            orderId: orderId,
            carId: this.carId
          }
          const { data: res } = await cancelOrder(params)
          this.getOrderList()
          console.log(res.meta.status)
          if (res.meta.status === 200) {
            this.$notify({ type: 'success', message: '取消成功' })
          }
        })
        .catch(() => {
          // on cancel
        })
    },
    async toDrive () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await using(params)
      if (res.data !== null) {
        this.$notify({
          type: 'danger',
          message: '有车辆正在驾驶，打开失败'
        })
      } else {
        this.$dialog.confirm({
          message: '你确定要驾驶吗？'
        })
          .then(async () => {
          // on confirm
          // 请求数据
            const params = {
              carId: parseInt(this.carId),
              userId: this.userInfo.userId
            }
            const { data: res } = await driving(params)
            console.log(res)
            if (res.meta.status === 200) {
              this.getOrderList()
              this.isShow = this.isShow = true
              this.$dialog.alert({
                message: '汽车开锁成功，页面即将跳转...',
                showConfirmButton: false
              }).then(() => {
                // on close
              })
              setTimeout(() => {
                this.$dialog.close()
                this.$router.push('/home')
              }, 2000)
            }
          })
          .catch(() => {
            // on cancel
          })
      }
      // this.$dialog.confirm({
      //   message: '你确定要驾驶吗？'
      // })
      //   .then(async () => {
      //   // on confirm
      //   // 请求数据
      //     const params = {
      //       carId: parseInt(this.carId),
      //       userId: this.userInfo.userId
      //     }
      //     const { data: res } = await driving(params)
      //     console.log(res)
      //     if (res.meta.status === 200) {
      //       this.getOrderList()
      //       this.isShow = this.isShow = true
      //       this.$dialog.alert({
      //         message: '汽车开锁成功，页面即将跳转...',
      //         showConfirmButton: false
      //       }).then(() => {
      //         // on close
      //       })
      //       setTimeout(() => {
      //         this.$dialog.close()
      //         this.$router.push('/home')
      //       }, 2000)
      //     }
      //   })
      //   .catch(() => {
      //     // on cancel
      //   })
    }
  }
}
</script>

<style scoped lang='scss'>
.box{
  padding: 0 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>
